<template>
  <div class="bigbox">
    <div class="box1">
      <router-link to="/"></router-link><span>商店</span>
    </div>

    <div class="row">
      <div class="col-3">
        <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
          <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">全部</a>
          <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">戒指</a>
          <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">手链</a>
          <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">耳饰</a>
          <a class="nav-link" id="v-pills-last-tab" data-toggle="pill" href="#v-pills-last" role="tab" aria-controls="v-pills-settings" aria-selected="false">项链</a>
        </div>
      </div>
      <div class="col-9">
        <div class="tab-content" id="v-pills-tabContent">
          <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel">

            <!--全部-->
            <div class="box16">
              <ul>
                <li v-for="(item,index) in quanbu" :key="index">
                  <div><img @click="tiao(quanbu,index)" :src="item.src" alt=""></div>
                  <div><p>{{item.title}}</p>
                    <p class="p1">
                      <span>￥<span>{{item.money}}</span></span>
                      <span class="iconfont icon-jiarugouwuche"></span></p>
                  </div>
                </li>
                <!-- <li>
                  <div><img src="../../public/img/bb.jpg" alt=""></div>
                  <div><p>Leysen钻石耳坠 18K金钻石耳钉女 女王时刻 群镶钻石耳饰 耳钉+耳坠</p>
                    <p class="p1"><span>￥1388-￥4140</span><span class="iconfont icon-jiarugouwuche"></span></p>
                  </div>
                </li>
                <li>
                  <div><img src="../../public/img/cc.jpg" alt=""></div>
                  <div><p>Leysen珠宝钻石项链钻石吊坠女显钻 金18K 百变风情八瓣 专柜同款</p>
                    <p class="p1"><span>￥3380</span><span class="iconfont icon-jiarugouwuche"></span></p>
                  </div>
                </li>
                <li>
                  <div><img src="../../public/img/dd.jpg" alt=""></div>
                  <div><p>Leysen月桂女神钻石吊坠女 唐嫣同款18K金钻石项链 黄18K金+K链套餐</p>
                    <p class="p1"><span>￥5999</span><span class="iconfont icon-jiarugouwuche"></span></p>
                  </div>
                </li>
                <li>
                  <div><img src="../../public/img/ee.jpg" alt=""></div>
                  <div><p>Leysen18K金钻石项链 钻石吊坠女 王室马车 王室马车吊坠</p>
                    <p class="p1"><span>￥2120</span><span class="iconfont icon-jiarugouwuche"></span></p>
                  </div>
                </li>
                <li>
                  <div><img src="../../public/img/ff.jpg" alt=""></div>
                  <div><p>Leysen月桂女神钻石耳饰女 专柜同款18K金玉石耳饰 黄18K金+K链套餐</p>
                    <p class="p1"><span>￥5999</span><span class="iconfont icon-jiarugouwuche"></span></p>
                  </div>
                </li> -->
              </ul>
            </div>

          </div>
          <div class="tab-pane fade" id="v-pills-profile" role="tabpanel">

            <!--戒指-->
            <div class="box16">
              <ul>
                <li v-for="(item,index) in jiezhi" :key="index">
                  <div><img @click="tiao(jiezhi,index)" :src="item.src" alt=""></div>
                  <div><p>{{item.title}}</p>
                    <p class="p1"><span>￥<span>{{item.money}}</span></span><span class="iconfont icon-jiarugouwuche"></span></p>
                  </div>
                </li>
                <!-- <li>
                  <div><img src="../../public/img/cc.jpg" alt=""></div>
                  <div><p>Leysen珠宝钻石项链钻石吊坠女显钻 金18K 百变风情八瓣 专柜同款</p>
                    <p class="p1"><span>￥3380</span><span class="iconfont icon-jiarugouwuche"></span></p>
                  </div>
                </li>
                <li>
                  <div><img src="../../public/img/ee.jpg" alt=""></div>
                  <div><p>Leysen18K金钻石项链 钻石吊坠女 王室马车 王室马车吊坠</p>
                    <p class="p1"><span>￥2120</span><span class="iconfont icon-jiarugouwuche"></span></p>
                  </div>
                </li> -->
              </ul>
            </div>

          </div>
          <div class="tab-pane fade" id="v-pills-messages" role="tabpanel">

            <!--手链-->
            <div class="box16">
              <ul>
                <li v-for="(item,index) in shoulian" :key="index">
                  <div><img @click="tiao(shoulian,index)" :src="item.src" alt=""></div>
                  <div><p>{{item.title}}</p>
                    <p class="p1"><span>￥<span>{{item.money}}</span></span><span class="iconfont icon-jiarugouwuche"></span></p>
                  </div>
                </li>
                <!-- <li>
                  <div><img src="../../public/img/dd.jpg" alt=""></div>
                  <div><p>Leysen月桂女神钻石吊坠女 唐嫣同款18K金钻石项链 黄18K金+K链套餐</p>
                    <p class="p1"><span>￥5999</span><span class="iconfont icon-jiarugouwuche"></span></p>
                  </div>
                </li>
                <li>
                  <div><img src="../../public/img/ee.jpg" alt=""></div>
                  <div><p>Leysen18K金钻石项链 钻石吊坠女 王室马车 王室马车吊坠</p>
                    <p class="p1"><span>￥2120</span><span class="iconfont icon-jiarugouwuche"></span></p>
                  </div>
                </li>
                <li>
                  <div><img src="../../public/img/ff.jpg" alt=""></div>
                  <div><p>Leysen月桂女神钻石耳饰女 专柜同款18K金玉石耳饰 黄18K金+K链套餐</p>
                    <p class="p1"><span>￥5999</span><span class="iconfont icon-jiarugouwuche"></span></p>
                  </div>
                </li> -->
              </ul>
            </div>

          </div>
          <div class="tab-pane fade" id="v-pills-settings" role="tabpanel">

            <!--耳饰-->
            <div class="box16">
              <ul>
                <li v-for="(item,index) in ershi" :key="index">
                  <div><img @click="tiao(ershi,index)" :src="item.src" alt=""></div>
                  <div><p>{{item.title}}</p>
                    <p class="p1"><span>￥<span>{{item.money}}</span></span><span class="iconfont icon-jiarugouwuche"></span></p>
                  </div>
                </li>
                <!-- <li>
                  <div><img src="../../public/img/dd.jpg" alt=""></div>
                  <div><p>Leysen月桂女神钻石吊坠女 唐嫣同款18K金钻石项链 黄18K金+K链套餐</p>
                    <p class="p1"><span>￥5999</span><span class="iconfont icon-jiarugouwuche"></span></p>
                  </div>
                </li>
                <li>
                  <div><img src="../../public/img/ff.jpg" alt=""></div>
                  <div><p>Leysen月桂女神钻石耳饰女 专柜同款18K金玉石耳饰 黄18K金+K链套餐</p>
                    <p class="p1"><span>￥5999</span><span class="iconfont icon-jiarugouwuche"></span></p>
                  </div>
                </li> -->
              </ul>
            </div>

          </div>
          <div class="tab-pane fade" id="v-pills-last" role="tabpanel">

            <!--项链-->
            <div class="box16">
              <ul>
                <li v-for="(item,index) in xianglian" :key="index">
                  <div><img @click="tiao(xianglian,index)" :src="item.src" alt=""></div>
                  <div><p>{{item.title}}</p>
                    <p class="p1"><span>￥<span>{{item.money}}</span></span><span class="iconfont icon-jiarugouwuche"></span></p>
                  </div>
                </li>
                <!-- <li>
                  <div><img src="../../public/img/bb.jpg" alt=""></div>
                  <div><p>Leysen钻石耳坠 18K金钻石耳钉女 女王时刻 群镶钻石耳饰 耳钉+耳坠</p>
                    <p class="p1"><span>￥1388-￥4140</span><span class="iconfont icon-jiarugouwuche"></span></p>
                  </div>
                </li>
                <li>
                  <div><img src="../../public/img/cc.jpg" alt=""></div>
                  <div><p>Leysen珠宝钻石项链钻石吊坠女显钻 金18K 百变风情八瓣 专柜同款</p>
                    <p class="p1"><span>￥3380</span><span class="iconfont icon-jiarugouwuche"></span></p>
                  </div>
                </li>
                <li>
                  <div><img src="../../public/img/dd.jpg" alt=""></div>
                  <div><p>Leysen月桂女神钻石吊坠女 唐嫣同款18K金钻石项链 黄18K金+K链套餐</p>
                    <p class="p1"><span>￥5999</span><span class="iconfont icon-jiarugouwuche"></span></p>
                  </div>
                </li> -->
              </ul>
            </div>

          </div>
        </div>
      </div>
    </div>

    <!--这个盒子目的为了撑开内容 不用管-->
    <div style="height: 50px"></div>
  </div>
</template>

<style lang="less" scoped>
  /*初始化*/
  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
  }
  .box1{
    position: fixed;
    top:0;
    width: 100%;
    height: 50px;
    font-size: 14px;
    text-align: center;
    line-height: 53px;
    border-bottom: 1px solid #d8d8d8;
    /*position: relative;*/
    background: white;
    z-index: 1;
    span{
      color: #000000;
    }
    a{
      position: absolute;
      left: 0;
      top: 0;
      width: 50px;
      height: 50px;
      background: url("../../public/img/arrow-left.png") no-repeat center center;
      background-size: 50%;
    }
  }
  .row{
    height: 595px;
    background: #F2F2F2;
    margin-top: 50px;
    font-size: 14px;
    .nav-link{
      line-height: 41px;
      text-align: center;
      color:black;
      background: #F2F2F2;
      border-radius: 0;
      border-bottom: 1px solid #cccccc;
    }
    .nav-pills{
      color: #cc0000;
    }
    .active{
      color:#cc0000;
    }
    .box16{
      background: white;
      /*li:nth-child(1){*/
        /*margin-top: 10px;*/
      /*}*/
      li{
        align-items: center;
        width: 100%;
        height: 100px;
        padding: 0 10px;
        /*margin-top: 20px;*/
        display: flex;
        /*li下面的第1个盒子*/
        div:nth-child(1){
          width: 30%;
          img{
            width: 100%;
          }
        }
        /*li下面的第2个盒子*/
        div:nth-child(2){
          width: 70%;
          .p1{
            display: flex;
            justify-content: space-between;
            .iconfont{
              font-size: 18px;
            }
          }
          p{
            margin: 17px 0;
            padding: 0 0 0 10px;
            color: #000000;
            font-size: 14px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 180px;
          }
          span{
            color: #cc0000;
          }
        }
      }
    }
  }
</style>

<script>
export default{
  data(){
    return{
      //全部的数据
      quanbu:[
      //  {
      //       "src": "img/aa.jpg",
      //       "title": "Leysen小王子的星空 金18k钻石吊坠女 钻石项链女 玫瑰金",
      //       "money": "2998"
      //   },
      //   {
      //       "src": "img/bb.jpg",
      //       "title": "Leysen钻石耳坠 18K金钻石耳钉女 女王时刻 群镶钻石耳饰",
      //       "money": "4140"
      //   },
      //   {
      //       "src": "img/cc.jpg",
      //       "title": "Leysen珠宝钻石项链钻石吊坠女显钻 金18K 百变风情八瓣",
      //       "money": "3380"
      //   },
      //   {
      //       "src": "img/dd.jpg",
      //       "title": "Leysen月桂女神钻石吊坠女 唐嫣同款1金钻石项链 K链套餐",
      //       "money": "5999"
      //   },
      //   {
      //       "src": "img/ee.jpg",
      //       "title": "Leysen18K金钻石项链 钻石吊坠女 王室马车 王室马车吊坠",
      //       "money": "2120"
      //   },
      //   {
      //       "src": "img/ff.jpg",
      //       "title": "Leysen月桂女神钻石耳饰女 专柜同款18K金玉石耳饰 黄金",
      //       "money": "5999"
      //   }
      ],
      //戒指的数据
      jiezhi:[
        // {
        //     "src": "img/aa.jpg",
        //     "title": "Leysen小王子的星空 金18k钻石吊坠女 钻石项链女 玫瑰金",
        //     "money": "2998"
        // },
        // {
        //     "src": "img/cc.jpg",
        //     "title": "Leysen珠宝钻石项链钻石吊坠女显钻 金18K 百变风情八瓣",
        //     "money": "3380"
        // },
        // {
        //     "src": "img/ee.jpg",
        //     "title": "Leysen18K金钻石项链 钻石吊坠女 王室马车 王室马车吊坠",
        //     "money": "2120"
        // }
      ],
      //手链的数据
      shoulian:[
      //  {
      //       "src": "img/cc.jpg",
      //       "title": "Leysen珠宝钻石项链钻石吊坠女显钻 金18K 百变风情八瓣",
      //       "money": "3380"
      //   },
      //   {
      //       "src": "img/dd.jpg",
      //       "title": "Leysen月桂女神钻石吊坠女 唐嫣同款18K金钻石项链 黄金",
      //       "money": "5999"
      //   },
      //   {
      //       "src": "img/ee.jpg",
      //       "title": "Leysen18K金钻石项链 钻石吊坠女 王室马车 王室马车吊坠",
      //       "money": "2120"
      //   },
      //   {
      //       "src": "img/ff.jpg",
      //       "title": "Leysen月桂女神钻石耳饰女 专柜同款金玉石耳饰 K链套餐",
      //       "money": "5999"
      //   }
      ],
      //耳饰的数据
      ershi:[
      //  {
      //       "src": "img/bb.jpg",
      //       "title": "Leysen钻石耳坠 18K金钻石耳钉女 女王时刻 群镶钻石耳饰",
      //       "money": "4140"
      //   },
      //   {
      //       "src": "img/dd.jpg",
      //       "title": "Leysen月桂女神钻石吊坠女 唐嫣同款18K金钻石项链 黄18K金",
      //       "money": "5999"
      //   },
      //   {
      //       "src": "img/ff.jpg",
      //       "title": "Leysen月桂女神钻石耳饰女 专柜同款18K金玉石耳饰 黄金",
      //       "money": "5999"
      //   }
      ],
      //项链的数据
      xianglian:[
        // {
        //     "src": "img/aa.jpg",
        //     "title": "Leysen小王子的星空 金18k钻石吊坠女 钻石项链女 玫瑰金",
        //     "money": "2998"
        // },
        // {
        //     "src": "img/bb.jpg",
        //     "title": "Leysen钻石耳坠 18K金钻石耳钉女 女王时刻 群镶钻石耳饰",
        //     "money": "4140"
        // },
        // {
        //     "src": "img/cc.jpg",
        //     "title": "Leysen珠宝钻石项链钻石吊坠女显钻 金18K 百变风情八瓣",
        //     "money": "3380"
        // },
        // {
        //     "src": "img/dd.jpg",
        //     "title": "Leysen月桂女神钻石吊坠女 唐嫣同款金钻石项链 K链套餐",
        //     "money": "5999"
        // }
      ],
    }
  },
  methods:{
    //点击图片传对应的内容到详情页
    tiao(arr,index1){//形参
      var obj={};

      arr.some((item,index)=>{//some() 方法用于检测数组中的元素是否满足
        if(index1==index){
         obj=item;
          //把数据传到后台
         localStorage.setItem("obj1",JSON.stringify(obj));
        }
      });
      //传数据
      this.$router.push({
        name:'Hui',
        params:{obj1:obj}
      })
    }
  },
  mounted(){
     this.$axios.get('http://47.111.93.194:3003/store').then((data)=>{
       console.log(data);
       this.quanbu=data.data.quanbu;
       this.jiezhi=data.data.jiezhi;
       this.shoulian=data.data.shoulian;
       this.ershi=data.data.ershi;
       this.xianglian=data.data.xianglian;
     })
  }
}
</script>